<template>
  <view class="page">
    <view class="class-list">
      <view class="class-item" v-for="item in classList" :key="item.id" @click="handleClassClick(item)">
        <view class="flex align-center justify-between">
          <view class="flex-1">
            <view class="flex align-center justify-between">
              <text class="class-tag" :class="{ 'type-1': item.type === 1, 'type-2': item.type === 2 }">
                {{ item.type === 1 ? '托' : '末' }}
              </text>
              <view class="flex-1">
                <u-text :text="item.className" size="32rpx" color="#333"></u-text>
              </view>
              <view>
                <u-text :text="item.studentCount + '人'" size="32rpx" color="#666"></u-text>
              </view>
            </view>
            <view class="flex align-center margin-top-sm">
              <u-text :text="'班主任：' + item.teacher" size="28rpx" color="#666"></u-text>
              <u-text :text="'讲师：' + (item.subject || '-')" size="28rpx" color="#666"></u-text>
            </view>
          </view>
          <view class="margin-left-sm">
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据
const classList = ref([
  {
    id: 1,
    type: 1,//托班
    className: '托管班：一年级（A）班',
    studentCount: 13,
    teacher: '张三',
    subject: '王五',
    schedule: '周三 18:00-20:00'
  },
  {
    id: 2,
    type: 2,//周末班
    className: '周末班：一年级-数学（A）班',
    studentCount: 13,
    teacher: '张三',
    subject: '李四',
    schedule: '周三 18:00-20:00'
  }
]);

// 点击课程项
const handleClassClick = (item) => {
  uni.navigateTo({
    url: `/pages/teacher/classes/detail?id=${item.id}&classType=${item.type}`
  });
};

// 点击课程表按钮
const handleDetailClick = (item) => {
  console.log('查看课程表:', item);
  // 这里可以跳转到课程表页面
};
</script>

<style scoped lang="scss">
.page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.class-list {
  padding: 20rpx;
}

.class-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.class-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.class-tag {
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 8rpx;
  margin-right: 12rpx;

  &.type-1 {
    color: #0060E6;
    border: solid 1px #0060E6;
  }

  &.type-2 {
    color: #FFA40C;
    border: solid 1px #FFA40C;
  }
}

.class-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.student-count {
  font-size: 28rpx;
  color: #333;
  margin-right: 8rpx;
}

.class-time {
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.time-label {
  color: #999;
}

.time-value {
  flex: 1;
  color: #666;
}

.detail-btn {
  color: #3c9cff;
  font-size: 26rpx;
}
</style>